<template>
    <div class="content">
        <el-dialog :visible.sync="addClassMain.dialogFormVisible" title="添加班级" size="tiny" :before-close="handleClose">
            <div v-loading="upLoading">
              <el-form ref="ruleForm" :model="ruleForm" label-width="87px">
                <!-- <el-form-item v-if="schoolTypeDate == '1' " label-width="0" label="">
                    <span class="title">学校信息</span>
                </el-form-item> -->
                <!-- <div v-if="schoolTypeDate == '1' ">
                    <el-row :gutter="41">
                        <el-col :span="20">
                            <el-form-item label="学校名称" prop="schoolName" :rules="name">
                              <el-input :disabled="true" v-model="ruleForm.schoolName"></el-input>
                                <el-select :disabled="true" v-model="ruleForm.schoolName" filterable remote reserve-keyword placeholder="请输入学校信息" :remote-method="remoteMethod" :loading="loading" style="width:100%" @change="queryAllGrade( ruleForm.schoolName )">
                                    <el-option v-for="item in schoolList" :key="item.schoolId" :label="item.schoolName" :value="item.schoolName">
                                    </el-option>
                                </el-select>
                            </el-form-item>
                        </el-col>
                    </el-row>
                </div> -->
                <el-form-item label-width="0" label="">
                    <span class="title">班级信息</span>
                </el-form-item>
                <div>
                    <el-row :gutter="41" v-if="schoolTypeDate == '1' ">
                        <el-col :span="20">
                            <el-form-item label="年级" prop="classGrade" :rules="rulesSelet">
                                <el-select v-model="ruleForm.classGrade" placeholder="请选择添加的班级" style="width:100%;" @change="queryAllClass( ruleForm.classGrade )">
                                    <el-option v-for="item in gradeList" :key="item.grade" :label="item.gradeName" :value="item.grade">
                                    </el-option>
                                </el-select>
                            </el-form-item>
                        </el-col>
                    </el-row>
                    <el-row :gutter="41">
                      <el-col :span="20">
                            <el-form-item label="班级数量" prop="classNum" :rules="nameClassNum">
                              <el-popover placement="top-start" trigger="focus" content="请输入小于10大于0的整数">
                                <el-input slot="reference" :maxlength="2" v-model="ruleForm.classNum" placeholder="请输入班级数量"></el-input>
                              </el-popover>
                            </el-form-item>
                        </el-col>
                    </el-row>
                </div>
                <el-form-item label-width="0" label="">
                </el-form-item>
            </el-form>
            <footer>
                <el-button @click="cancel">取消</el-button>
                <el-button @click="add('ruleForm',$event)" type="primary">确认</el-button>              
            </footer>
            </div>

        </el-dialog>
    </div>
</template>
<script>
// import {
//   queryAllProvince,
//   queryAllCityByProvinceId,
//   queryAllAreaByCityId
// } from "api/schoolManage";
import { addClassInfo, getSchoolList, getClass, getGrade } from "api/classAll";
import { mapGetters } from "vuex";
export default {
  name:"addClassSchool",
  props: {
    addClassMain: {
      type: Object,
      required: true
    }
  },
  created() {
    //判断当前身份 的学校是否是 培训 1 普通学校 0
    if(this.schoolType == '1'){
      //不能输入
      this.ruleForm.schoolName = this.schoolName;
      this.schoolTypeDate = '0';
    }else{
      this.schoolTypeDate = '1';
      this.ruleForm.schoolName = this.schoolName;
      this.queryAllGrade(this.schoolId)
    }
  },
  computed: {
    ...mapGetters(["schoolId","schoolName","schoolType"])
  },
  data() {
    return {
      upLoading:false,
      gradeList: [],
      ruleForm: {
        provinceId: "",
        cityId: "",
        areaId: "",
        schoolName: "",
        classGrade: "",
        classNum: ""
      },
      schoolTypeDate:'1',
      loading: false,
      schoolList: [],
      //是否培训和普通学校  1 0
      // schoolType: "0",
      rulesSelet: { required: true, message: "请选择", trigger: "change" },
      rulesSeletcity: {
        validator: (rule, value, callback) => {
          if (!this.cityId && !value) {
            callback(new Error("请选择"));
          } else {
            callback();
          }
        },
        trigger: "change"
      },
      rulesSeletarea: {
        validator: (rule, value, callback) => {
          if (!this.areaId && !value) {
            callback(new Error("请选择"));
          } else {
            callback();
          }
        },
        trigger: "change"
      },
      name: { required: true, message: "请输入学校名称", trigger: "blur" },
      nameClassNum: [
        { message: "请输入内容", required: true },
        { message: "每次最多添加10个班", trigger: "blur", pattern: /^([1-9]|10)$/ }
      ],
      allCity: {
        province: [],
        cityList: [],
        CountyList: []
      }
    };
  },
  methods: {
    remoteMethod(query) {
      if (!query) {
        // this.schoolList = [];
      } else {
        this.loading = true;
        setTimeout(() => {
          this.loading = false;
          getSchoolList(
            query,
            !this.ruleForm.provinceId ? null : this.ruleForm.provinceId,
            !this.ruleForm.cityId ? null : this.ruleForm.cityId,
            !this.ruleForm.areaId ? null : this.ruleForm.areaId
          ).then(response => {
            // //console.log(response)
            this.schoolList = response.data.content;

            //判断是否培训学校还是普通学校
            if(this.schoolList[0]){
              if(this.schoolList[0].schoolType == '0'){
                this.schoolTypeDate = '0'
              }else{
                this.schoolTypeDate = '1'
              }
            }else{
              this.schoolTypeDate = '1'
            }
          });
        }, 200);
      }
    },
    //判断是否普通学校/培训学校
    judgmentSta(val) {
      this.schoolList.forEach(item => {
        if (val === item.schoolId) {
          this.$store.dispatch('SetSchoolType', item.schoolType);
          // this.schoolType = item.schoolType;
        }
      });
    },
    // 年级列表
    queryAllGrade(schoolId) {
      if (schoolId) {
        this.judgmentSta(schoolId);
        this.getGradeName = "";
        this.newSchoolId = schoolId;
        getGrade(!schoolId? null : schoolId).then(response => {
          this.gradeList = response.data.content;
        });

        //判断是否是培训还是普通学校
        
      }
    },

    // 班级列表
    queryAllClass(gradeId) {
      // this.classIdIn = gradeId;
      getClass(
        !this.newSchoolId ? null : this.newSchoolId,
        !gradeId ? null : gradeId
      ).then(response => {
        this.classList = response.data.content;
      });
    },
    handleClose() {
      // this.$refs.ruleForm.resetFields();
      this.addClassMain.dialogFormVisible = false;
    },
    add(ruleForm,event) {
      if(event.clientX == 0) return;
      this.$refs[ruleForm].validate(valid => {
        if (valid) {
          this.upLoading = true;
          addClassInfo(
            // this.getSchoolId()
            this.schoolId,
            this.ruleForm.classGrade,
            this.ruleForm.classNum + ""
          ).then(data => {
            this.upLoading = false;
            // this.addClassMain.dialogFormVisible = false;
            //给父组件传值
              this.$message({
                message: "添加成功！",
                type: "success"
              });
              this.$emit("addClassState", true);
              // this.$store.dispatch('UpdateCache', true);
              this.addClassMain.dialogFormVisible = false;
          }).catch(Error =>{
            this.$message(Error);
            this.upLoading = false;
          })
        }
      });
    },
    cancel() {
      this.addClassMain.dialogFormVisible = false;
    }
  }
};
</script>
<style lang="scss" scoped>
.title {
  display: block;
  text-align: left;
  margin-left: 20px;
  font-size: 14px;
  color: #333;
  padding-bottom: 10px;
  position: relative;
  &::after{
    position: absolute;
    width: 4px;
    height: 14px;
    background: #ff5e2c;
    left: -15px;
    top: 9px;
    content: ""
  }
}

footer {
  text-align: center;
}
</style>
